{% extends 'layout_full.html' %}

{% block css_files %}
  <link href='/css/homepage.css?zx={{version}}' rel='stylesheet'/>
{% endblock css_files %}

{% block content %}
<div id='home'>
  <div id='home_popular'>
    <b>Popular&nbsp;searches</b>
    <div id='popular_list'></div>
  </div>

  <div id='home_mini'>
   <div id='mini_without_location' style='display:none;'>
    <div id='no_location_message'>
      Find volunteering events near you
    </div>
   </div>

   <div id='mini_with_location' style='display:none;'>
    <div id='location_message'>Volunteering events in <span id='location_text'></span></div>
    <a href='javascript:void(0)' onclick='el("location_form").style.display=""; this.style.display="none";return false;'>
      Change location
    </a>
   </div>

   <div id='location_form' style='display:none;'>
    <form onsubmit='submitForm("");return false;' class='valign'>
      <input id='location' size='40' class='valign' value=''/>
      <img class='search_button pointer valign'
           onclick='submitForm(""); return false;'
           height='28' src='/images/red-search-button.png'>
    </form>
   </div>

   <div id='snippets'></div>
   <div id='more' style='display:none;'><a id='more_link'>See more...</a></div>
  </div>

  <div id='home_left'>
    <img src='/images/leadin.png'>

    <div id='home_signin'>
      <div id='home_signin_header'>Sign in to:</div>

      <ul>
        <li>Share volunteering activities with your friends
        <li>Invite friends to join you on <b>All&nbsp;for&nbsp;Good</b> and see how they're volunteering
        <li>Track volunteering activities you care about
      </ul>

      <p id='home_signin_links'>Track and share your opportunities by signing in with
        <a href='javascript:void(0);' onclick="requestFacebookSignIn();return false">Facebook</a>,
        <a href='javascript:void(0);' onclick="google.friendconnect.requestSignIn('GOOGLE');return false">Google</a>, or
        <a href='javascript:void(0);' onclick="google.friendconnect.requestSignIn('');return false">more &raquo;</a>
    </div>
  </div>
</div>

<script type='text/javascript' src='/js/homepage.js?zx={{version}}'></script>
{% endblock content %}
